// 验收弹窗
<template>
  <div class="addDialog">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1200px" @closed="handleDialogClosed" :close-on-click-modal="false">
      <el-form ref="form" :rules="rules" :model="formData">
        <el-row :gutter="40">
          <el-col :span="24">
            <h4>验收信息</h4>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工程名称" class="listFormItem" prop="engineeringName">
              <el-button class="add" type="primary" size="mini" @click="chooseProperty" v-if="type == 'add'">选择工程</el-button>
              <el-input v-model="formData.engineeringName" :readonly="isReadonly" placeholder="请输入工程名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="full" label="物业名称" prop="propertyName">
              <el-input v-model="formData.propertyName" disabled placeholder="选择工程，自动生成物业名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="full" label="施工单位" prop="propertyName">
              <el-input v-model="formData.propertyName" disabled placeholder="选择工程，自动生成施工单位" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="验收日期" class="breakItem" :readonly="isReadonly" prop="deliverableTm">
              <el-date-picker v-model="formData.deliverableTm" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="请输入验收日期" :disabled="isReadonly" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="验收评价" class="full" prop="performanceEvaluation">
              <el-input v-model="formData.performanceEvaluation" :readonly="isReadonly" maxlength="200" type="textarea" placeholder="请输入验收评价" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" class="full" prop="remarks">
              <el-input v-model="formData.remarks" type="textarea" :readonly="isReadonly" maxlength="200" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="album" v-if="dialogVisible">
          <el-col :span="24">
            <h4 class="dialogItemTitle">上传附件</h4>
          </el-col>
          <el-col :span="24">
            <v-upload
              type="file"
              ref="upload"
              :busId="formData.deliverableId"
              modelType="acceptManage"
              @onSuccess="onSuccess"
              v-model="uploadFileList"
              isShowFileList
              :isView="type === 'preview'"
              :autoLoadFiles="false"
              :canDelete="type !== 'preview'"
            />
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button v-if="type !== 'preview'" type="primary" v-throttle="[save]">提 交</el-button>
      </div>
      <!-- 工程选择弹窗 -->
      <propertyChooseDialog ref="propertyChoose" dialogType="accept" @changeProperty="handlePropertyChange" />
    </el-dialog>
  </div>
</template>

<script>
import propertyChooseDialog from "@/views/wy-operate/components/propertyChooseDialog";
import uploadMedia from '@/components/upload-media';
import { changeAcceptApply } from "@/views/wy-operate/api/repair.js";

export default {
  name: 'addDepartment',
  components: {
    propertyChooseDialog,
    uploadMedia
  },
  inject: ['initList'],
  data () {
    return {
      type: 'add',//弹窗类型，默认新增
      //弹窗开关
      dialogVisible: false,
      // 表单项
      formData: {
        // 物业ID
        roomId: '',
        // 工单id
        billId: '',
        // 工程名称
        engineeringName: '',
        // 物业名称
        propertyName: '',
        // 验收日期
        deliverableTm: '',
        // 验收评价|履约评价
        performanceEvaluation: '',
        // 备注
        remarks: ''
      },
      // 校验规则
      rules: {
        engineeringName: [{ required: true, message: '工程名称不能为空', trigger: 'blur' }],
        propertyName: [{ required: true, message: '物业名称不能为空', trigger: 'blur' }],
        deliverableTm: [{ required: true, message: '验收日期不能为空', trigger: 'blur' }],
        performanceEvaluation: [{ required: true, message: '验收评价不能为空', trigger: 'blur' }],
      },
      // 上传文件列表
      uploadFileList: [],
    }
  },
  computed: {
    // 弹窗标题计算
    dialogTitle () {
      return {
        'preview': '查看',
        'edit': '编辑',
        'add': '新增',
      }[this.type]
    },
    isReadonly () {
      return ["preview", "approval"].includes(this.type);
    },
  },
  methods: {
    //开启弹窗
    show ({ type, data = {} }) {
      console.log(data)
      if (['preview', 'edit', 'accept'].includes(type)) {
        this.formData = data
        this.$nextTick(() => {
          this.$refs.upload && this.$refs.upload.getFiles(data.deliverableId)
        })
      }
      this.type = type
      this.dialogVisible = true
    },
    // 提交新增
    save () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.uploadFileList.length) {
            this.$refs.upload.submit('acceptManage', this.formData.deliverableId);
          } else {
            const res = await changeAcceptApply(this.formData, this.type)
            if (res.data.code == 0) {
              this.$message.success(`${this.dialogTitle}成功!`);
              this.initList({ current: 1, queryString: '' });
              this.dialogVisible = false;
            } else {
              this.$message.error(res.data.msg);
            }
          }
        }
      });
    },
    // 上传成功
    async onSuccess (response, file, fileList) {
      let params = this.type == 'add' ? { ...this.formData, deliverableId: response.data } : this.formData
      const res = await changeAcceptApply(params, this.type)
      if (res.data.code == 0) {
        this.$message.success(`${this.dialogTitle}成功!`);
        this.initList({ current: 1, queryString: '' });
        this.dialogVisible = false;
      } else {
        this.$message.error(res.data.msg);
      }
    },
    // 添加物业名称
    addProperty () {
      this.formData.propertyName.push({
        value: ''
      });
    },
    // 删除物业名称
    removeProperty (index) {
      this.formData.propertyName.splice(index, 1)
    },
    // 监听工程改变
    handlePropertyChange (data) {
      console.log(data)
      this.formData = {
        ...this.formData,
        ...data
      };
    },
    // 选择工程名称
    chooseProperty () {
      this.$refs.propertyChoose.show();
    },
    // 弹窗关闭监听
    handleDialogClosed () {
      for (var i in this.formData) {
        this.formData[i] = ''
      }
      this.uploadFileList.length = 0
    }
  },
}
</script>

<style lang="scss" scoped>
@import "src/views/wy-operate/css/operate.scss";
.addDialog {
  /deep/ .el-date-editor--datetime {
    width: 100%;
  }
}
</style>
